<template>

    <el-tooltip
        :popper-class=" props.rows == 1? 'overflowTooltip': 'overflowTooltipLight'"
        :effect="effect"
        :content="props.tooltipContent ? props.tooltipContent : props.content"
        :placement="props.placement"
        :disabled="isShow"
      
       
    >
        <template #content>
            <slot name="tooltipContent">
                <p v-if="props.title" class="title">{{props.title}}</p>
                {{ props.tooltipContent ? props.tooltipContent : props.content }}
            </slot>
        </template>
        <div
            :class=" props.rows == 1? 'content-1': 'content'"
            :style="{ width: props.width }"
            @mouseover="isShowTooltip"
        >
            <span ref="contentRef">
                <!-- 给一个没有写插槽的默认值，兼容纯文本的情况 -->
                <slot name="content">
                   
                    {{ props.content }}
                </slot>
            </span>
          
        </div>
    </el-tooltip>
</template>
<script setup>
import { ref } from 'vue';
// 定义props的类型
const props = defineProps({
    content: {
        type: String,
        default: ''
    },
    width: {
        type: String,
        default: '100%'
    },
    tooltipContent: {
        type: String,
        default: ''
    },
    placement: {
        type: String,
        default: 'top'
    },
    rows: {
        type: Number,
        default: 1
    },
    lineHeight: {
        type: Number,
        default: 20
    },
    effect: {
        type: String,
        default: 'dark'
    },
 
    title: {
        type: String,
        default: ''
    }
});
const { rows } = {...props};


// 使用isShow来控制tooltip是否显示
const isShow = ref(false);
// 在span标签上定义一个ref
const contentRef = ref(null);
const isShowTooltip = function () {
    if (props.rows == 1) {
        
        // 计算span标签的offsetWidth与盒子元素的offsetWidth，给isShow赋值
        if (contentRef.value.parentNode.offsetWidth >= contentRef.value.offsetWidth) {
          
            isShow.value = true;
        } else {
    
            isShow.value = false;
        }
               
    } else {
       
        if (contentRef.value.offsetHeight >=( props.rows * props.lineHeight)) {
          
            
            isShow.value = false;
            
        } else {
       
            isShow.value = true;
        }
    }
};
</script>

<style lang="scss" scoped>
.content-1 {
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap; // 默认不换行；
}

.content {
    word-break: break-all;

    text-overflow: ellipsis;

    display: -webkit-box;

    -webkit-box-orient: vertical;

     -webkit-line-clamp: v-bind('rows')   ; /* 这里是超出几行省略 */

    overflow: hidden;
}
.title {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #000000;
    margin-bottom: 6px;
    font-weight: normal;
}
</style>
<style lang="scss">
.overflowTooltip {
    max-width: 400px;
    background: #444;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
}
.overflowTooltip ::before {
    background: #444;
}
.overflowTooltipLight {
    max-width: 380px;
    background: #fff;
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #666666;
    line-height: 22px;
  
    padding: 20px;
    padding-top: 16px;
  
}
.overflowTooltipLight.is-light {
    background: #fff;
      border: none;
        box-shadow: 0px 4px 16px 0px rgba(11, 23, 73, 0.1);
    .el-popper__arrow::before{
        box-shadow: 0px 4px 16px 0px rgb(11 23 73 / 10%);
        border: none;
    }
}
</style>
